<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function removeAll(){
            var ul = document.getElementById("ul");
            var fc = ul.firstChild;
            while (fc != null){
                fc.remove();
                fc = ul.firstChild;
            }

            // 有问题
            // var ul = document.getElementById("ul");
            // var all = ul.children;
            // console.log(all);
            // for(i = 0 ;i<all.length;i++){
            //     all.get(i).remove
            // }
            

        }


    </script>

    <style>
        button{
            width: 100px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li id="sh" >上海</li>
        <li id="bj">北京</li>
        <li id="sz">深圳</li>
        <li id="hz">杭州</li>
    </ul>
    <hr>
    <button id="btn" onclick="removeAll()">删除列表</button>

    
</body>
</html>